<route lang="json5">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '使用与帮助',
    layout: false,
    'app-plus': {
      background: '#f8f8f8',
    },
    enablePullDownRefresh: true,
  },
}
</route>

<template>
  <th-page-box tabBarHeight="200rpx">
    <template #tabBar>
      <view class="tab_bar_inner">
        <wd-navbar title="使用与帮助" :bordered="false" safeAreaInsetTop>
          <template #left>
            <wd-icon name="thin-arrow-left" size="22px" color="white" @click="goBack"></wd-icon>
          </template>
        </wd-navbar>
        <view class="cu-bar search-container">
          <view class="search-form round">
            <wd-input
              type="text"
              prop="menuName"
              v-model="state.menuName"
              no-border
              clearable
              placeholder="请输入菜单名称"
              style="
                display: flex;
                align-items: center;
                width: 100%;
                height: 100%;
                padding: 0 20rpx;
              "
              @confirm="init"
              confirm-type="search"
            />
            <text class="filter-icon cuIcon-searchlist" @click="state.filterIsShow = true"></text>
          </view>
          <view class="action">
            <button
              @click="init()"
              class="cu-btn bg-gradual-green shadow-blur round"
              style="margin-right: 10rpx"
            >
              查询
            </button>
          </view>
        </view>
      </view>
    </template>
    <template #inner>
      <view class="content">
        <view class="inner">
          <thCollapses
            v-model:list="state.staticMenu"
            :objInfo="{
              value: 'id',
              label: 'name',
              children: 'children',
            }"
            :isShowLeftIcon="isShowLeftIcon"
            :isAccordion="true"
            @click="toDetail"
          ></thCollapses>
          <wd-loadmore
            v-if="!state.staticMenu || !state.staticMenu.length"
            state="finished"
            finishedText="暂时无数据"
          ></wd-loadmore>
        </view>
        <!-- <button @click="toDetail1">去详情</button> -->
      </view>
      <wd-popup
        v-model="state.filterIsShow"
        position="bottom"
        :close-on-click-modal="false"
        custom-style="padding: 32rpx;border-top-left-radius:60rpx;border-top-right-radius:60rpx;"
        @close="handleClose"
      >
        <view class="cu-dialog" @click.stop="">
          <view class="cu-bar bg-white" style="min-height: 60rpx !important">
            <view class="action"></view>
            <view class="action mks" @click="state.filterIsShow = false">取消</view>
            <!-- <view class="action text-blue mks" @tap="handleSearch()">确定</view> -->
          </view>
          <view class="filter_container">
            <view class="block">
              <view class="label">菜单名称</view>
              <view class="row">
                <input type="text" v-model="state.menuName" placeholder="请输入菜单名称" />
              </view>
            </view>
            <view class="block">
              <view class="label">终端</view>
              <view class="row">
                <!-- <wd-picker :columns="state.options" v-model="state.clientType" /> -->
                <view class="radio_box">
                  <wd-radio-group v-model="state.clientType" shape="dot" inline>
                    <wd-radio :value="1">APP</wd-radio>
                    <wd-radio :value="0">PC</wd-radio>
                  </wd-radio-group>
                </view>
              </view>
            </view>
            <view class="block" style="margin-top: 60rpx">
              <view class="row">
                <view class="btn" @click="resetFilter">重置</view>
                <view class="btn primary" @click="init()">查询</view>
              </view>
            </view>
          </view>
        </view>
      </wd-popup>
    </template>
  </th-page-box>
</template>

<script lang="ts" setup>
import { getNewUserMenuDoc } from '@/service/admin/sysMenuDoc';

const goBack = () => {
  uni.navigateBack();
};

const loading = ref(false);
const collapse = ref();
const collapses = ref([]);
const state = reactive({
  activeUrl: '',
  menuName: '',
  clientType: 1, // 0 PC 1 APP
  options: [
    {
      label: 'PC',
      value: 0,
    },
    {
      label: 'APP',
      value: 1,
    },
  ],
  filterIsShow: false,
  staticMenu: [],
});

const isShowLeftIcon = (val) => {
  if (val && val.doc) {
    return {
      isShow: true,
      icon: 'cuIcon-copy text-gray',
    };
  }
  if (val && (!val.children || !val.children.length)) {
    return {
      isShow: true,
      icon: 'cuIcon-cascades text-gray',
    };
  }
  return {
    isShow: false,
    icon: 'cuIcon-copy text-gray',
  };
};

const toDetail = (info) => {
  // console.log(info);
  if (info.doc) {
    uni.navigateTo({
      url: `/pages/setting/useAndHelpDetail?id=${info.id}`,
    });
  }
};

const toDetail1 = () => {
  const id = '1798244703166898178';
  uni.navigateTo({
    url: `/pages/setting/useAndHelpDetail?id=${id}`,
  });
};
const init = () => {
  state.filterIsShow = false;
  uni.showLoading();
  getNewUserMenuDoc({
    menuName: state.menuName,
    clientType: state.clientType,
  })
    .then((res) => {
      state.staticMenu = res.data || [];
    })
    .finally(() => {
      uni.stopPullDownRefresh();
      uni.hideLoading();
    });
};
const handleClose = () => {
  state.filterIsShow = false;
};

const resetFilter = () => {
  handleClose();
  state.menuName = '';
  state.clientType = 1;
  init();
};

onLoad((options) => {
  init();
});
onPullDownRefresh(() => {
  // 重新获取
  init();
});
</script>
<style scoped lang="scss">
page {
  background-color: #f8f8f8;
}
.content {
  padding-top: 110rpx;
  flex: 1;
  overflow: auto;
  .inner {
    padding: 16rpx 16rpx 10rpx 10rpx;
    background-color: white;
  }
}

.wd-cell-group {
  ~ .wd-cell-group {
    margin-top: 24rpx;
  }
}
.check-update-submit-item {
  // padding: 20% 0 0%;
  padding: 50rpx 0 0;

  .check-update-submit {
    width: 60%;
    height: 70rpx;
    margin: 0 auto;
    font-size: 30rpx;

    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-align: center;

    // background-color: #0081ff;
    background-color: rgb(8 131 237);
    border-radius: 10rpx;
  }
  .check-update-submit.gray {
    background-color: rgba(128, 128, 128, 0.8);
  }
}

.cu-bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 50px;
}

.cu-bar .search-form {
  display: flex;
  flex: 1;
  align-items: center;
  height: 64rpx;
  margin: 0 30rpx;
  overflow: hidden;
  /* padding: 0 40rpx; */
  font-size: 24rpx;
  line-height: 64rpx;
  color: #333;
  background-color: #f5f5f5;
}
.tab_bar_inner {
  background-image: linear-gradient(45deg, #0081ff, #1ab3f5);
  :deep(.wd-navbar) {
    background-color: rgba(0, 0, 0, 0) !important;
    background-image: linear-gradient(45deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)) !important;
  }
  // .cu-bar.search-container {
  //   background-image: linear-gradient(45deg, #0081ff, #1ab3f5);
  // }
  :deep(uni-button:after) {
    border: 1px solid rgba(0, 0, 0, 0);
  }
}

.search-container .filter-icon {
  padding: 0 18rpx;
  margin: 0;
  font-size: 40rpx;
  color: #007aff;
  border-left: 1rpx solid #f3f3f3;
}

.round {
  border-radius: 2500px;
}

.cu-bar .search-form + .action {
  margin-right: 30rpx;
}

.cu-bar .action {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  height: 100%;
}

.search-container .action .cu-btn {
  padding: 0 24rpx;
}

.bg-gradual-green {
  color: #fff;
  background-image: linear-gradient(45deg, #39b54a, #8dc63f);
}

.cu-btn {
  position: relative;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 64rpx;
  padding: 0 30rpx;
  margin-right: initial;
  margin-left: initial;
  overflow: visible;
  font-size: 28rpx;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  border: 0;
  transform: translate(0, 0);
}
.cu-dialog {
  font-size: 28rpx;
}

.cu-dialog > .cu-bar:first-child .action {
  margin-right: 20rpx;
}

.filter_container {
  padding: 10rpx 32rpx 32rpx;
  padding-bottom: 64rpx;
  text-align: left;
  background-color: #fff;

  .block {
    ~ .block {
      margin-top: 32rpx;
    }

    .label {
      margin-bottom: 20rpx;
      font-weight: bold;
    }
  }

  .row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;

    .date-picker {
      flex: 1;
      padding: 16rpx;
      text-align: center;
      background-color: #f7f7f7;
      border-radius: 8rpx;
    }

    .select-box {
      flex: 1;
      padding: 16rpx;
      background-color: #f7f7f7;
      border-radius: 8rpx;

      :deep(.select-row) {
        padding: 0;
        background: none;
      }
    }

    input {
      flex: 1;
      height: 33rpx;
      padding: 16rpx 12rpx;
      font-size: 26rpx !important;
      background-color: #f7f7f7;
      border: 1rpx solid #f7f7f7;
      border-radius: 8rpx;

      .input-placeholder {
        color: #8a929f;
        .wd-radio__label {
          padding: 0 20rpx !important;
        }
      }
    }
    .radio_box {
      flex: 1;
      .wd-radio-group {
        display: flex;
        justify-content: space-around;
      }
    }

    .btn {
      flex: 1;
      padding: 16rpx;
      color: #999;
      text-align: center;
      background-color: #f7f7f7;
      border: 1rpx solid #dedede;
      border-radius: 8rpx;

      ~ .btn {
        margin-left: 24rpx;
      }

      &.primary {
        color: #fff;
        background-color: #007aff;
        border-color: #007aff;
      }
    }
  }
}

:deep(.wd-navbar__left--hover) {
  background: none;
}
</style>
